<script lang="tsx">
import useRender from "@/utils/hooks/render";
import { Calendar } from "@nutui/nutui-taro/dist/packages/calendar/index.mjs";
import "@nutui/nutui-taro/dist/packages/calendar/style.mjs";
import { ArrowRight } from "@nutui/icons-vue-taro";

import { ref } from "vue";
export default {
  setup(props, ctx) {
    const dateText = ref("");
    const open = ref(false);

    useRender(() => (
      <div>
        <div
          class="uno-flex uno-flex-items-center"
          onClick={() => {
            open.value = true;
          }}
        >
          <text class="uno-fs-30 uno-flex-1 uno-text-right">
            {dateText.value}
          </text>
          <ArrowRight />
        </div>

        <Calendar
          visible={open.value}
          {...(ctx.attrs || {})}
          onClose={() => {
            open.value = false;
          }}
          onChoose={([Y, M, D]) => {
            const str = [Y, M, D].join("-");
            dateText.value = str;
            ctx.emit("field-change", str);
            open.value = false;
          }}
        />
      </div>
    ));
    return {};
  },
};
</script>

<style lang="scss" scoped></style>
